<template>
	<view class="bottom">
		<view class="remove-btn" v-if="!isBtnSlot">
			<view @click="clickBtn" class="btn">{{title}}</view>
		</view>
		<view class="btn-slot" v-else>
			<slot name="btnSlot"></slot>
		</view>
		<view class="remove-zw" v-if="isShowZw"></view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: '删除'
			},
			isBtnSlot: {
				type: Boolean,
				default: false
			},
			bgColor: {
				type: String,
				default: '#43CF7C'
			},
			viewBgColor: {
				type: String,
				default: 'red'
			},
			isShowZw: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			clickBtn() {
				this.$emit('clickBtn')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bottom {
		.remove-btn {
			width: 100%;
			height: 120rpx;
			position: fixed;
			bottom: 0;
			left: 0;

			.btn {
				width: 60%;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #43CF7C;
				color: #fff;
				margin-left: 20%;
				border-radius: 40rpx;
				text-align: center;
				font-size: 32rpx;

				&:active {
					background-color: #dbdbdb;
				}
			}
			
		}

		.remove-zw {
			width: 100%;
			height: 120rpx;
		}
	}
</style>
